<!-- 左侧类型 -->

<template>
  <div class="QuestionnaireList-MyQuestion-LeftType">
    <EasyScroll full>
      <draggable
        :list="DICT.TYPE"
        :group="{ name: 'question', pull: 'clone', put: false }"
        :clone="toClone"
        :move="toMove"
        :disabled="isShow"
      >
        <div
          v-for="item in DICT.TYPE"
          :key="item[0]"
          class="QuestionnaireList-MyQuestion-item QuestionnaireList-MyQuestion-item-hover alignCenter"
        >
          <BtnText :title="item[1]" :disabled="isShow" @dbClick="toDbClick(item)" />
        </div>
      </draggable>

      <div class="QuestionnaireList-MyQuestion-LeftType-tip">拖动或双击</div>
    </EasyScroll>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'LeftType',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 待选列表的移动
     */
    toMove(e) {
      // 自身内部不显示移动效果
      if (e.from === e.to) return false
    },

    /**
     * 从左侧拖拽后复制
     */
    toClone([type]) {
      return {
        ...CORE.clone(this.MAP.TYPE),
        type,
        id: '', // ID 为空，以 key 为唯一标识
        key: `${Date.now()}`,
      }
    },

    /**
     * 双击按钮
     */
    toDbClick([type]) {
      const item = this.toClone([type])
      this.one.questionList.push(item)
    },
  },
}
</script>
